<?php
$product = $this->product;

$productImages = $this->productImages;
$productColors = $this->productColors;
$productSizes  = $this->productSizes;
$productOther  = $this->productOther;

$colorString = null;
if($productColors) {
    foreach ($productColors as $value) {
        if(!$value) {
            continue;
        }
        if($colorString) {
            $colorString .= ', ' . $value;
        } else  {
            $colorString .= $value;
        }
    }
}

$sizeString = null;
if($productSizes) {
    foreach ($productSizes as $value) {
        if(!$value) {
            continue;
        }
        if($sizeString) {
            $sizeString .= ', ' . $value;
        } else  {
            $sizeString .= $value;
        }
    }
}
?>

<div class="detail_container">
    <div class="detail_top">
        <div class="detail_top_left">
            <div class="detail_image">
                <?php if(isset($productImages[0])): ?>
                <img src="<?= $productImages[0]['path'] ?>" alt="" width="550px" height="550px"/>
                <?php else: ?>
                <img src="<?= $product['thumbnail_link'] ?>" alt="" width="250px" height="250px"/>
                <?php endif; ?>
            </div>
        </div>
        <div class="detail_top_right">
            <div class="detail_top_right_item">
                <div class="detail_top_right_item_content">
                    <span class="detail_name"><?= $product['name'] ?></span>
                    <span class="detail_info">Mã sản phẩm : <b><?= $product['code'] ?></b></span>
                    <span class="detail_info">Màu sắc : <b><?= $colorString ?></b></span>
                    <span class="detail_info">Size : <b><?= $sizeString ?></b></span>
                    <span class="detail_info">Tình trạng : <b><?= $product['status_title'] ?></b></span>
                    <span class="detail_info">Giá bán:</span>
                    <span class="detail_price"><?= $this->currencyFormat($product['price_sale'], null) ?> VNĐ</span>
                    <?php if($product['is_sale_off']): ?>
                    <span class="detail_info">Giá gốc: <?= $this->currencyFormat($product['price_original'], null) ?> VNĐ</span>
                    <?php endif; ?>
                </div>
            </div>

            <div class="detail_top_right_item">
                <div class="detail_top_right_item_content">
                    <a class="btn btn-inverse button buy_button" href="#modal" role="button" data-toggle="modal">ĐẶT MUA</a>
                </div>
            </div>

            <div class="detail_top_right_item">
                <div class="detail_top_right_item_content">
                    <!-- AddThis Button BEGIN -->
                    <div class="addthis_toolbox addthis_default_style ">
                    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                    <a class="addthis_button_tweet"></a>
                    <a class="addthis_button_pinterest_pinit"></a>
                    <a class="addthis_counter addthis_pill_style"></a>
                    </div>
                    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
                    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-500bc4165d38d108"></script>
                    <!-- AddThis Button END -->
                </div>
            </div>

            <div class="detail_top_right_item detail_top_right_item_end detail_top_right_item_description">
                <div class="detail_top_right_item_content">
                    <span class="detail_info">Thông tin sản phẩm:</span>
                    <span class="detail_info detail_description"><?= $product['description'] ?></span>
                </div>
            </div>
        </div>
    </div>
    <?php if($productImages): ?>
    <?php if(isset($productImages[0])) unset($productImages[0]) ?>
    <?php foreach($productImages as $image): ?>
    <div class="detail_view_images" >
        <img src="<?= $image['path'] ?>" alt="" />
    </div>
    <?php endforeach; ?>
    <?php endif; ?>
    <div style="display: block; clear: both; width: 100%; border-bottom: 1px solid #ccc"></div>
</div>
<?php if($productOther): ?>
<div class="product_same">
    <div class="content-title">
        <h1>Sản phẩm cùng loại</h1>
    </div>
    <?php foreach($productOther as $p): ?>
    <div class="product-item">
        <a href="/chi-tiet/<?php echo $this->routeUrl($p['name']) . '-' . $p['id'] .'.html'?>"><img class="product-img" src="<?= $p['thumbnail_link'] ?>"/></a>
        <h4 class="product-code">Mã SP: <?= $p['code'] ?></h4>
        <span class="product-price">Giá: <?= $this->currencyFormat($p['price_sale'], null) ?> VNĐ</span>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>


<!-- Modal -->
<?php $f = $this->form; ?>
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
	<form method="post" id="order-form">
        <div class="modal-header">
        	<h3 id="modalLabel">Đặt mua sản phẩm này</h3>
        </div>
        <div class="modal-body" id="order-body">
        	<table class="table">
        		<tr>
        			<td>Họ tên <span class="required">*</span></td>
        			<td><?= $f->getElement('full_name'); ?></td>
        		</tr>
        		<tr>
        			<td>Email <span class="required">*</span></td>
        			<td><?= $f->getElement('email'); ?></td>
        		</tr>
        		<tr>
        			<td>Điện thoại <span class="required">*</span></td>
        			<td><?= $f->getElement('phone'); ?></td>
        		</tr>
        		<tr>
        			<td>Địa chỉ</td>
        			<td><?= $f->getElement('address'); ?></td>
        		</tr>
        		<tr>
        			<td>Lời nhắn</td>
        			<td><?= $f->getElement('message'); ?></td>
        		</tr>
        	</table>
        	<p>Vui lòng điền đầy đủ các trường có dấu (<span class="required">*</span>).</p>
        </div>
        <div class="modal-footer">
            <input type="button" class="btn btn-inverse" value="Gửi thông tin" name="submit" id="submit">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        <?= $f->getElement('id'); ?>
	</form>
</div>

<style>
.modal-header {
    padding: 2px;
    border-bottom: 1px solid #EEE;
}
#modalLabel {
    background-color: #181818;
    color: #fff;
    padding: 8px;
    text-align: center;
}
.table th, .table td {
    padding: 5px;
    line-height: 16px;
    text-align: left;
    vertical-align: top;
    border-top: none;
    vertical-align: middle;
}
.required {
	color: red
}
</style>

<script>
$(function(){
	//var form  = $("#order-form");
	var name  = $("#full_name");
	var email = $("#email");
	var phone = $("#phone");

	name.blur(validateName);
	email.blur(validateEmail);
	phone.blur(validatePhone);

	function validateName(){
		if(name.val().length < 4){
			$(".full-name-error").remove();
			name.after("<ul class='errors full-name-error'><li><?php echo $this->translate("We_want_names_with_more_than_3_letters!"); ?></li></ul>");
			return false;
		}
		else{
			$(".full-name-error").remove();
			return true;
		}
	}

	function validateEmail(){
		var a = $("#email").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		if(filter.test(a)){
			$(".email-error").remove();
			return true;
		} else{
			$(".email-error").remove();
			email.after("<ul class='errors email-error'><li><?php echo $this->translate("Type_a_valid_email_please") ?></li></ul>");
			return false;
		}
	}

	function validatePhone(){
		var a = $("#phone").val();
		var filter = /^[0-9-+]+$/;
		if(a.length > 6 && a.length < 12 && filter.test(a)){
			$(".phone-error").remove();
			return true;
		}
		else {
			$(".phone-error").remove();
			phone.after("<ul class='errors phone-error'><li><?php echo $this->translate("Type_a_valid_phone_please!"); ?></li></ul>");
			return false;
		}
	}

	$('#submit').live('click', function(){
		if(!validateName() || !validateEmail() || !validatePhone()) {
			return false;
		}
		$.ajax('/product/create-order?', {
            data: $('#order-form').serialize(),
            type: 'post',
            success: function(d) {
                $('#order-body').html('');
                $('#submit').remove();
                $('#order-body').html(d);
                setTimeout(function() {
                    $('#modal').fadeOut(1000);
                    $('.modal-backdrop').remove();
                }, 3500);
            },
            error:function(e){console.log(e); alert('Gửi đơn hàng thất bại, vui lòng thử lại sau!');}
           });
	});
});
</script>